/**
 * Created by JamesZhang on 2017/5/16.
 */
import React from "react";
import ReactDOM from "react-dom";
// react-router 4.0 开始使用使用新的api,   react-router-dom
// NavLink Link的特殊版本, 主要是为导航准备的, 有以下属性:
// activeClassName 字符串
// activeStyle  对象
// exact 布尔值, 只有当访问地址严格匹配时激活样式才会应用
// strict 布尔值, 只有当访问地址后缀斜杠严格匹配(有或无)时激活样式才会应用.
// isActive: func, 决定导航是否激活, 或者在导航激活时做点别的事情, 不管怎样, 它不能决定页面是否可以渲染
import {HashRouter as Router, Route, Link, NavLink} from "react-router-dom";
import {createStore, applyMiddleware} from "redux";
import {Provider, connect} from "react-redux";

// 全局store
// const store = createStore({},() => {});


import Bundle from "./bundle";
import List from "bundle-loader?lazy&name=[name]!./scripts/components/list.js";

import DemoLazyLoadComponent from "bundle-loader?lazy&name=[name]!./scripts/components/demoLazyLoad.js"

const ListContainer = () => (
    <Bundle load={List}>
        {(ListContainer) => <ListContainer/>}
    </Bundle>
)

const DemoLazyLoadComponentContainer = () => (
    <Bundle load={DemoLazyLoadComponent}>
        {(DemoLazyLoadComponentContainer) => <DemoLazyLoadComponentContainer/>}
    </Bundle>
)

class Root extends React.Component{
    constructor(props, context){
        super(props, context);
    }
    render(){
        return (
            <div>
                我是James Zhang, 和我做个盆友吧!
            </div>
        )
    }
}

class About extends React.Component{
    constructor(props, context){
        super(props, context);
    }
    render(){
        return (
            <div>
                About
            </div>
        )
    }
}

class Topics extends React.Component{
    constructor(props, context){
        super(props, context);
    }
    render(){
        return (
            <div>
                Topics
            </div>
        )
    }
}
// ReactDOM.render(<Root/>, document.getElementById('root'));


ReactDOM.render(
        <Router>
            <div>
                <ul>
                    <li><NavLink to="/" exact={true} activeClassName="active">首页</NavLink></li>
                    <li><NavLink to="/about" activeClassName="active">关于</NavLink></li>
                    <li><NavLink to="/topics" activeClassName="active">主题列表</NavLink></li>
                    <li><NavLink to="/DemoLazyLoadComponentContainer" activeClassName="active">DemoLazyLoadComponent</NavLink></li>
                </ul>

                <hr/>

                <Route exact path="/" component={Root}/>
                <Route path="/about" component={About}/>
                <Route path="/topics" component={ListContainer}/>
                <Route path="/DemoLazyLoadComponentContainer" component={DemoLazyLoadComponentContainer}/>


            </div>
        </Router>
, document.getElementById('root'));

